<template>
  <el-card class="selsect_card">
    <el-form :inline="true" class="cateSelect_section">
      <el-form-item label="一级分类">
        <el-select
          v-model="key_first"
          placeholder="请选择一级分类"
          clearable
          :disabled="select_disabled"
          @change="SELECT_CHANGE($event, 2)"
        >
          <template v-for="item in option_first" :key="item.id">
            <el-option :label="item.name" :value="item.id" />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          v-model="key_second"
          placeholder="请选择二级分类"
          clearable
          :disabled="select_disabled"
          @change="SELECT_CHANGE($event, 3)"
        >
          <template v-for="item in option_second" :key="item.id">
            <el-option :label="item.name" :value="item.id" />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          v-model="key_third"
          placeholder="请选择三级分类"
          clearable
          :disabled="select_disabled"
        >
          <!-- @change="SELECT_CHANGE($event, 4)" -->
          <template v-for="item in option_third" :key="item.id">
            <el-option :label="item.name" :value="item.id" />
          </template>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'attributeCateSelect',
}
</script>

<script setup lang="ts">
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import useAttributeCate from '@/store/modules/attributeCateStore'
defineProps(['select_disabled'])
//  const props =
let AttributeCate = useAttributeCate()
onMounted(() => {
  AttributeCate.GET_CATE()
  //   AttributeCate.RECORD_SLECET([2, 35, 355])
})
const {
  key_first,
  key_second,
  key_third,
  option_first,
  option_second,
  option_third,
} = storeToRefs(AttributeCate)
const SELECT_CHANGE = (id, level) => {
  //   if (level == 4) return
  TRIGGER_GET_CATE({ id, level })
}
const TRIGGER_GET_CATE = ({ id, level }) => {
  if (level == 2) {
    key_second.value = ''
    option_second.value = []
    key_third.value = ''
    option_third.value = []
  }
  if (level == 3) {
    key_third.value = ''
    option_third.value = []
  }
  if (!id) return
  AttributeCate.GET_CATE({ id, level })
}
</script>
<style scoped lang="scss">
.cateSelect_section .el-input {
  --el-input-width: 220px;
}

.cateSelect_section .el-select {
  --el-select-width: 220px;
}
</style>
